<template>
	<view>
		<carHeader :title="'订单管理'"></carHeader>
		<view class="rongqi1">
			<uni-search-bar placeholder="请输入订单号进行搜索" bgColor="#ffffff" @confirm="search" @clear="clear"/>
		</view>
		<view class="rongqi2">
			<view class="sl">
				共{{ items.length }}条
			</view>
			<view class="fw">
				<uni-data-select
				        v-model="value"
				        :localdata="range"
				        @change="change"
				      ></uni-data-select>
				<!-- 待服务 -->
				<!-- <view class="biankuang" @click="toggleDetails">
					<view v-if="showDetails" class="arrow-down"></view>
					<view v-else class="arrow-right"></view>
				</view> -->
			</view>
		</view>

		<block v-for="(item, index) in items" :key="index">
			<view class="xq">
				<view class="bianhao">
					<text style="font-size: 26rpx; font-weight: 600;">订单号: {{item.orderDetailsId}}</text>
					<text
						style="font-size: 26rpx;margin-left: 280rpx; color: red; font-weight: 600;">{{item.prePrice}}</text>
				</view>
				<view class="yonghu" style="font-size: 26rpx">
					<view class="a1" style="margin-top: 6rpx;">
						下单用户 : {{item.userName}}
					</view>
					<view class="a2" style="margin-top: 6rpx;">
						预约时间 : {{item.orderTime}}
					</view>
					<view class="a3" style="margin-top: 6rpx;">
						服务项目: {{item.serviceDetails.name}}
					</view>
				</view>
				<view class="dj">
					<view class="a4" style="font-size: 20rpx;margin-top: 14rpx;color: #bebebe;">
						下单时间:{{item.createTime}}
					</view>
					<view class="a5">
						<button class="a5an" @click="ckdetail(item.orderDetailsId,item.verificationStatus)">查看详情</button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhuangtai:"",
				items: [],
				 value: 0,
				range: [
				    { value: 2, text: "待服务" },
				    { value: 5, text: "已完成" },
				 ],
			};
		},
		methods: {
			ckdetail(id){
				console.log(id)
				uni.navigateTo({
					url:`/pages/orderDetails/orderDetails?orderDetailsId=${encodeURIComponent(id)}`
				})
			},
			search(res) {
				uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
				}),
				uni.request({
					url:'http://localhost:8080/carShop/carShop/orderDetails/list?orderDetailsId='+res.value,
					success: (res) => {
						this.items = res.data;
					    console.log(res.data);
					    }
				})
			},
			change(e) {
			    console.log("e:", e);
				this.zhuangtai = e;
				uni.request({
					url:'http://localhost:8080/carShop/carShop/orderDetails/list?orderStatus='+e,
				success: (res) => {
					this.items = res.data;
				    console.log(res.data);
				    }
				})
			},
			clear(res) {
				uni.request({
					url:'http://localhost:8080/carShop/carShop/orderDetails/list',
				success: (res) => {
					this.items = res.data;
				    console.log(res.data);
				    }
				})
			},
		},
		onLoad() {
			uni.request({
				url:'http://localhost:8080/carShop/carShop/orderDetails/list',
			success: (res) => {
				this.items = res.data;
			    console.log(res.data);
			    }
			})
		}
	}
</script>

<style lang="scss">
	 .text {
	    font-size: 12px;
	    color: #282828;
	    margin-top: 5px;
	  }
	  
	.a5an {
		height: 55rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		margin-bottom: 12rpx;
		color: white;
		background-color: blue;
		border-radius: 30rpx;

	}

	.dj {
		// border: 4rpx solid black;
		width: 94%;
		margin-left: 18rpx;
	}

	.yonghu {
		border-bottom: 3rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
	}

	.bianhao {
		height: 60rpx;
		border-bottom: 4rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
		margin-top: 20rpx;
	}

	.xq {
		// border: 4rpx solid black;
		width: 96%;
		margin-left: 12rpx;
		position: relative;
		top: -235rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.dj {
		display: flex;
		justify-content: space-between;
	}

	.rongqi2 {
		width: 88%;
		display: flex;
		margin-left: 50rpx;
		justify-content: space-between;
		position: relative;
		top: -250rpx;
		// border: 4rpx solid black;
	}

	.fw {
		display: flex;
		// color: #ffffff;
		margin-right: 30rpx;
	}

	.sl {
		color: #ffffff;
	}

	.rongqi1 {
		position: relative;
		top: -250rpx;
		width: 96%;
		margin-left: 14rpx;
	}

	.biankuang {
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow-down {
		width: 10rpx;
		height: 10rpx;
		border-right: 4rpx solid white;
		border-bottom: 4rpx solid white;
		transform: rotate(45deg);
	}

	.arrow-right {
		width: 10rpx;
		height: 10rpx;
		border-top: 4rpx solid white;
		border-left: 4rpx solid white;
		transform: rotate(45deg);
	}
</style>